import React, { useEffect, useMemo, useState } from "react";


export const Father: React.FC = () => {
    const [count, setCount] = useState(0)
    const [flag, setFlag] = useState(false)

    const add = () => {
        setCount(prev => prev + 1)
    }

    const toggle = () => {
        setFlag(prev => !prev)
    }

    //根据布尔值进行计算  动态返回内容
    const tips = useMemo(() => {
        console.log("触发了tips的重新计算")
        return flag ? "上班" : "下班"
    },[flag]) 

    return (
        <div>
            <h1>父组件</h1>
            <h3>count的值是：{count}</h3>
            <h3>flag的值是：{String(flag)}</h3>
            <h1>{tips}</h1>  
            <button onClick={add}>+1</button>
            <button onClick={toggle}>Toggle</button>
            <Son count={count} />
        </div>
    )
}

const Son: React.FC<{ count: number }> = React.memo(({ count }) => {
    useEffect(() => {
        console.log("触发了子组件的渲染")
    })
    return (
        <div>
            <h1>子组件</h1>
            <h3>count的值是：{count}</h3>
        </div>
    )
})


